<template>
  <div class="card-box">
    <div class="card-item" @click="handleToDetail">
      <div class="card-header">
        <div class="header-title">
          <div :class="`title ${value.applyName.length >= 9 ? 'set_width' : ''}`">
            <span v-show="value.applyName">
              {{ value.applyName }}的{{ applyType === 3 ? '竣工申请' : applyType === 2 ? '开工申请' : '建房申请' }}
            </span>
          </div>
          <div :class="`notice-status ${tagClass}`" @click.stop="handleEdit()">
            {{ value.applyStatusName }}
          </div>
        </div>
      </div>
      <van-divider />
      <div class="card-body">
        <ul class="apply-info" v-if="applyType === 1">
          <li>单号：{{ value.applyOrderNo }}</li>
          <li>申请时间：{{ value.applyTime }}</li>
          <li>家庭住址：{{ value.applyHouseAddress }}</li>
          <li>联系电话：{{ value.applyPhone }}</li>
        </ul>
        <ul class="apply-info" v-else>
          <li>关联建房申请：单号{{ value.applyOrderNo }}</li>
          <li>申请时间：{{ value.applyTime }}</li>
          <li>申请内容：{{ value.applyContent }}</li>
        </ul>
        <div v-show="showEditBtn" class="reapply" @click.stop="handleReset">
          {{ applyType === 3 ? '整改上报' : '重新申请' }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, onMounted, computed, toRefs, watch } from 'vue'
import { useRouter } from 'vue-router'
export default {
  props: {
    value: {
      type: Object,
      default: () => {
        return {}
      },
    },
    // applyType: 1建房申请  2开工申请  3竣工申请
    applyType: {
      type: Number,
      default: 1,
    },
  },
  setup(props) {
    const router = useRouter()
    const state = reactive({
      applyType: 1,
      value: props.value,
    })

    onMounted(async () => {})

    const handleToDetail = () => {
      let id = props.value.id
      if (state.applyType === 2) {
        id = props.value.applyBaseId
      }
      let url = '/record-apply/detail-build/'
      switch (state.applyType) {
        case 2:
          url = '/record-apply/detail-start/'
          break
        case 3:
          url = '/record-apply/detail-finish/'
          break
        default:
          break
      }
      router.push({ path: url + id })
    }

    const handleEdit = () => {
      let status = props.value.applyStatus
      if (
        status === '00' ||
        status === '20' ||
        status === '40' ||
        status === '03' ||
        status === '05' ||
        status === '13' ||
        status === '23' ||
        status === '43'
      ) {
        handleReset()
      }
    }
    // 重新申请
    const handleReset = () => {
      let r = '/build-apply/apply-notes'
      let id = props.value.id
      switch (state.applyType) {
        case 2:
          r = '/start-apply'
          id = props.value.applyBaseId
          break
        case 3:
          r = '/finish-apply'
          break
        default:
          break
      }
      router.push({ path: r, query: { id: id } })
    }

    const showEditBtn = computed(() => {
      let isShow = false
      switch (state.applyType) {
        case 2:
          isShow = ['23'].includes(props.value.applyStatus)
          break
        case 3:
          isShow = ['43'].includes(props.value.applyStatus)
          break
        default:
          isShow = ['03', '05', '13'].includes(props.value.applyStatus)
          break
      }
      return isShow
    })

    const tagClass = computed(() => {
      let tagClass = ''
      switch (props.value.applyStatus) {
        case '01':
        case '1':
        case '02':
        case '2':
        case '11':
        case '21':
        case '41':
          tagClass = ''
          break
        case '03':
        case '05':
        case '3':
        case '13':
        case '23':
        case '43':
          tagClass = 'status-danger'
          break
        case '42':
        case '12':
        case '22':
          tagClass = 'status-success'
          break
        default:
          tagClass = 'status-info'
          break
      }
      return tagClass
    })
    watch(
      () => props.applyType,
      (type) => {
        state.applyType = type
      },
      { immediate: true }
    )
    return {
      ...toRefs(state),
      tagClass,
      showEditBtn,
      handleToDetail,
      handleEdit,
      handleReset,
    }
  },
}
</script>

<style lang="less" scoped>
@import '@/common/style/mixin';
.card-box {
  margin-top: 10px;
  color: #2e3f6a;
  font-weight: 400;
  .header-title {
    font-size: 16px;
    font-weight: bold;
    .title {
      line-height: 28px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .set_width {
      width: 190px;
    }
    .fj();
    .notice-status {
      background: #e1f1ff;
      border-radius: 3px;
      color: #216eec;
      font-size: 13px;
      font-weight: 400;
      padding: 4px 14px 5px;
    }
    .status-success {
      background-color: #e8f7e0;
      color: #5eb02d;
    }
    .status-info {
      background-color: #ddf6fa;
      color: #009eb6;
    }
    .status-danger {
      background-color: #ffe9e9;
      color: #df3838;
    }
    .finish {
      background-color: #72c604;
    }
  }
  .card-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    // background-color: #FFF;
    .apply-info {
      li {
        margin-top: 6px;
      }
    }
    .reapply {
      background: #3487f6;
      border-radius: 3px;
      color: @fc;
      font-size: 13px;
      font-weight: 400;
      padding: 4px 14px 5px;
    }
  }
  .van-divider {
    margin: 10px 0 0;
  }
}
</style>